<?xml version="1.0" encoding="utf-8"?>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Cursor position and drag image after new element is added to dragstore</title>
<script type="application/ecmascript">
function start(event,element)
  {event.dataTransfer.effectAllowed = 'copy';
  event.dataTransfer.addElement(document.querySelectorAll('canvas')[element]);}
</script>
</head>
<body>
<p>
  <canvas width="100" height="100" draggable="true" ondragstart="start(event,1)">Canvas</canvas>
  <canvas width="100" height="100" draggable="true" ondragstart="start(event,0)">Canvas</canvas>
</p>
<p>Try to drag canvas above. Feedback overlay should include both canvases and mouse pointer should be anchored in dragged ones center.</p>
<script type="application/ecmascript">
var canvases = document.querySelectorAll('canvas');
paintCanvas(canvases[0],'navy');
paintCanvas(canvases[1],'green');
function paintCanvas(canvas,color)
  {var c = canvas.getContext('2d');
  for(var x = 0; x != 50; x++)
    {c.fillStyle = (x%2 == 0)?color:'white';
    c.beginPath();
    c.moveTo(x,x);
    c.lineTo(100-x,x);
    c.lineTo(100-x,100-x);
    c.lineTo(x,100-x);
    c.closePath();
    c.fill();}
  }
</script>
</body>
</html>
